import React from "react";
import { IconCheck } from "@arco-design/web-react/icon";
import Title, { SubTitle } from "./Title";
const ValueCard = () => {
  const list = [
    {
      title: "大使用量",
      content: "打造更优的模型效果",
      bgColor: "#0163FF",
      gradient:
        "linear-gradient(180deg,  rgba(0, 179, 255, 0.2) 0%, rgba(255, 255, 255, 0.00) 33%), #FFF",
      data: [
        "每日万亿级tokens大使用量",
        "字节跳动内部50+业务场景打磨",
        "专业算法团队保证模型使用效果",
      ],
    },
    {
      title: "模型家族",
      content: "适配企业多种业务场景",
      bgColor: "#00B3FF",
      gradient:
        "linear-gradient(180deg,  rgba(0, 179, 255, 0.2) 0%, rgba(255, 255, 255, 0.00) 33%), #FFF",
      data: [
        "语言、语音、视觉等多种模态模型",
        "适配众多行业业务场景",
        "按需灵活选择不同模型",
      ],
    },
    {
      title: "更易落地",
      content: "满足个性化业务场景需求",
      bgColor: "#8C56FF",
      gradient:
        "linear-gradient(180deg,  rgba(0, 179, 255, 0.2) 0%, rgba(255, 255, 255, 0.00) 33%), #FFF",
      data: [
        "支持按需选择不同版本主力模型",
        "全系列语言模型均可精调",
        "提供灵活经济的模型选择",
      ],
    },
    {
      title: "安全可信",
      content: "满足合规性需求",
      bgColor: "#17CBCB",
      gradient:
        "linear-gradient(180deg,  rgba(0, 179, 255, 0.2) 0%, rgba(255, 255, 255, 0.00) 33%), #FFF",
      data: [
        "首批通过大模型服务安全备案",
        "通过安全沙箱构建可信的执行环境",
        "多维度的安全架构保障数据安全",
      ],
    },
  ];
  return (
    <div>
      <div className="text-center">
        <Title>价值优势</Title>
        <SubTitle>以优质的模型效果，为企业打造丰富的业务体验</SubTitle>
      </div>
      <div>
        {list.map(({ title, content, bgColor, gradient, data }, index) => {
          return (
            <div
              className="rounded-xl overflow-hidden shadow-xl my-4"
              key={index}
            >
              <div
                className="p-5 h-32 text-white text-xl"
                style={{
                  background: bgColor,
                }}
              >
                <div>{title}</div>
                <div>{content}</div>
              </div>
              <div
                style={{
                  background: gradient,
                }}
                className="rounded-xl h-32 -mt-10 p-5"
              >
                {data.map((text, key) => {
                  return (
                    <div className="flex gap-2 items-center py-1" key={key}>
                      <div>
                        <IconCheck style={{ color: "blue" }} />
                      </div>
                      <div>{text}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};
export default ValueCard;
